<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>bsgrid</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/oksub.css">
    <link rel="stylesheet" href="../../lib/jquery.bsgrid/builds/merged/bsgrid.all.min.css">
    <style>
        #bsgrid {
            width: 100%;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="ok-body">
        <!--模糊搜索区域-->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 ok-search">
                <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
                <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
                <input class="layui-input" placeholder="账号" autocomplete="off" name="username">
                <button class="layui-btn" lay-submit="" lay-filter="search">
                    <i class="layui-icon">&#xe615;</i>
                </button>
            </form>
        </div>
        <!--数据表格-->
        <table id="bsgrid">
            <tr>
                <th w_index="id" w_check="true"></th>
                <th w_index="id">ID</th>
                <th w_index="username" w_align="left">账号</th>
                <th w_index="password" w_align="left">密码</th>
                <th w_index="nickname">昵称</th>
                <th w_index="name">姓名</th>
                <th w_index="role" w_render="roleFmt" w_align="left">角色</th>
                <th w_index="status" w_render="statusFmt">状态</th>
                <th w_index="email" w_align="left">邮箱</th>
                <th w_index="phone">手机</th>
                <th w_index="createTime">创建时间</th>
                <th w_index="updateTime">修改时间</th>
                <th w_render="toolbar" w_align="center">工具栏</th>
            </tr>
        </table>
    </div>
    <!--js逻辑-->
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../lib/jquery.bsgrid/plugins/jquery-1.4.4.min.js"></script>
    <script src="../../lib/jquery.bsgrid/builds/js/lang/grid.zh-CN.min.js"></script>
    <script src="../../lib/jquery.bsgrid/builds/merged/bsgrid.all.min.js"></script>
    <script>
        layui.use(["element", "util", "form", "laydate", "okMock", "okUtils"], function () {
            let util = layui.util;
            let okMock = layui.okMock;
            let form = layui.form;
            let laydate = layui.laydate;

            util.fixbar({});

            laydate.render({elem: "#startTime", type: "datetime"});
            laydate.render({elem: "#endTime", type: "datetime"});

            let gridObj = $.fn.bsgrid.init("bsgrid", {
                url: okMock.api.bsgrid,
                pageSizeSelect: true,
                pageSize: 20,
                rowHoverColor: true,
                complete: function () {
                }
            });

            form.on("submit(search)", function (data) {
                gridObj.search(data.field);
                return false;
            });
        });

        function roleFmt(row) {
            let role = row.role;
            if (role == 0) {
                return "超级会员";
            } else if (role == 1) {
                return "普通用户";
            }
        }

        function statusFmt(row) {
            let status = row.status;
            if (status == 0) {
                return "已启用";
            } else if (status == 1) {
                return "已停用";
            }
        }

        function toolbar(row) {
            let id = row.id;
            let html = "";
            html += '<a title="编辑" href="javascript:;" onclick="updateUser(\'' + id + '\')"><span class="ok-icon">&#xe649;</span></a>';
            html += '<a title="删除" href="javascript:;" onclick="deleteUser(\'' + id + '\')"><span class="ok-icon">&#xe6b4;</span></a>';
            return html;
        }

        function updateUser(id) {
            alert("updateUser id=" + id);
        }

        function deleteUser(id) {
            alert("deleteUser id=" + id);
        }
    </script>
</body>
</html>
